<template>
  <div class="commodity">
    <div v-if="classifyList.length > 0" class="list">
      <div
        class="items"
        v-for="(item, index) in classifyList"
        :key="index"
        @click="ToProd(item.prodId)"
      >
        <img class="images" :src="item.pic" alt="" />
        <p class="title">{{ item.prodName }}</p>
        <span class="pri">￥{{ item.price }}</span>
      </div>
    </div>
    <div v-else class="empty-list">暂无数据</div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  computed: {
    ...mapState({
      classifyList: (state) => state.user.classifyList,
    }),
  },
  methods: {
    ...mapActions({
      getActionsClassify: "user/getActionsClassify",
    }),
    ToProd(id) {
      wx.navigateTo({
        url: `/pages/prod/prod?detailsId=${id}`,
      });
    },
  },
  mounted() {
    this.getActionsClassify();
  },
};
</script>

<style scoped>
.commodity {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.list {
  display: block;
}
.items {
  width: 375rpx;
  float: left;
  background: #fff;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  padding-left: 15px;
}
.images {
  width: 345rpx;
  height: 345rpx;
}
.title {
  height: 76rpx;
  font-size: 28rpx;
  display: -webkit-box;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
}
.pri {
  font-size: 28rpx;
  color: red;
}
.empty-list {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin: 100rpx 0;
}
</style>